<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>重复服务排查</title>
<link rel="stylesheet" type="text/css" href="../../../css/reset.css" />
<link rel="stylesheet" type="text/css" href="../../../css/css.css" />
<link rel="stylesheet" type="text/css"
	href="../../../js/jquery-easyui-1.4.3/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css"
	href="../../../js/jquery-easyui-1.4.3/themes/icon.css" />
<link rel="stylesheet" type="text/css"
	href="../../../js/SimpleTree1.3/js/tree_themes/SimpleTree.css" />
<link rel="stylesheet" type="text/css"
	href="../../../css/colorReset.css" />
<style type="text/css">
#yuansu {
	/* width: 28%;
	height: 100px;
	float: left; */
	margin: 0 2%;
	float: left;
	height: 120px;
	overflow-y: auto;
	width: 28%;
	text-align: center;
	border: 1px solid #ccc;
	/*	background: url(../../../images/console/field_bg.png) left top no-repeat;*/
}

#topdiv {
	height: 120px;
	background-color: #f0ffff;
	text-align: center;
	border: 2px solid #000;
}

#progressbar {
	display: none;
	position: absolute;
	left: 0;
	bottom: 0;
	height: 300px;
	width: 100%;
	opacity: 0.5;
	filter: alpha(opacity = 60);
	background-color: #ffffff;
}

.title {
	width: 80%;
	margin: 0 auto;
	padding: 15px 0 10px 0;
	font-size: 25px;
	text-align: center;
}

.title h2 img {
	width: 150px;
}

.title .line {
	width: 300px;
	height: 1px;
	line-height: 0px;
	border-bottom: 1px dashed #D1D1D1;
	margin: 10px auto 15px auto;
}

.title p {
	font-size: 18px;
}

.content dl {
	display: none;
}

.content dl dd {
	display: block;
	margin: 0 5px;
}

.compare-con {
	width: 95%;
	position: absolute;
	left: 0;
	top: 0;
	font-size: 0;
	overflow: auto;
	float: left;
	margin: 30px 30px auto 30px;
	display: none;
	background: #fff;
}

.compare-item {
	display: inline-block;
	font-size: 14px;
	border: 1px solid #ddd;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
}

.ulCss {
	padding: 15px;
}

.ulCss li {
	padding: 5px;
}

.result-dialog {
	display: none;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
}

.mask {
	position: fixed;
	height: 100%;
	width: 100%;
	filter: alpha(opacity = 40);
	background: #979797;
	opacity: 0.4;
}

.result-con {
	position: absolute;
	hight: 300px;
	top: 50%;
	margin: -150px auto 0;
	background: #fff;
	border-radius: 4px;
	width: 700px;
	left: 50%;
	margin-left: -350px;
}

#result {
	overflow-y: auto;
}

.result-img {
	position: absolute;
	width: 200px;
	height: 150px;
	left: -100px;
	top: -75px;
}

a.result-close {
	position: absolute;
	color: #333;
	font-size: 18px;
	font-weight: bold;
	right: 10px;
	top: 4px;
}
</style>
</head>

<body>
	<div class="main" id="main">
		<div class="title">
			<h2>来检查一下有没有系统是重复的吧O(∩_∩)O</h2>
		</div>
		<div class="content">
			<div class="title">
				<img src="../../../images/main_normal_bg.png" alt="" />
			</div>
		</div>
	</div>
	<div style="margin: 0 auto 0; width: 96px;">
		<button onclick="start()" id="scheduling"
			class="default_btn easyui-linkbutton" iconCls="icon-export">开始排重</button>
	</div>

	<div class="data_con" style="text-align: center;">
		<div id="progressbar"></div>
		<div id="progressbar_tips" style="display: none;">
			<img src="../../../images/progressbar.gif" alt="" />
			<p>
				数据加载中，请稍后...... <span id="progressbar_point"></span>
			</p>
		</div>
		<div class="result-dialog">
			<div class="mask"></div>
			<div class="result-con">
				<p
					style="height: 28px; background: url(../../../images/layout-browser-hd-bg.png) repeat-x; width: 100%; margin-bottom: 56px; color: #fff; text-align: center; line-height: 28px;"></p>
				<div id="result" style="margin: 0 20px 60px;"></div>
				<img src="../../../images/main_normal_bg.png" alt=""
					class="result-img" /> <a href="javascript:void(0);"
					class="result-close">X</a>
			</div>
		</div>
	</div>

	<div class="compare-con">
		<div class="compare-group" style="margin-bottom: 15px;">
			<div class="compare-item" style="width: 50%">
				<div>
					<ul class="ulCss">
						<li style="background-color: #ccc;">接口名称：</li>
						<li><label id="interfaceAddress" class="label"
							style="margin-left: 20px;">接口1</label></li>

						<li style="background-color: #ccc;">接口地址:</li>

						<li><label id="interfaceAddress" class="label"
							style="margin-left: 20px;">www.baidu.com</label></li>

						<li style="background-color: #ccc;">请求参数:</li>

						<li class="li_col" style="width: 100%;">
							<div class="input_con table_add" id="requestParametersTable"
								style="width: 85%; margin-left: 20px;">
								<table id="requestDatagrid"
									data-options="fitColumns:true,toolbar:'#toolbox'">
								</table>
							</div>
						</li>

					</ul>
				</div>
			</div>

			<div class="compare-item" style="width: 50%">
				<div>
					<ul class="ulCss">
						<li id="interfaceName" style="background-color: #ccc;">接口名称：</li>
						<li><label id="interfaceAddress" class="label"
							style="margin-left: 20px;">接口2</label></li>

						<li style="background-color: #ccc;"><label class="label"
							style="font-size: 15px;">接口地址：</label></li>

						<li><label id="interfaceAddress" class="label" id=""
							style="margin-left: 20px;">www.baidu.com</label></li>

						<li style="background-color: #ccc;"><label class="label"
							style="font-size: 15px;">请求参数和报文：</label></li>

						<li class="li_col" style="width: 100%;">
							<div class="input_con table_add" id="requestParametersTable"
								style="width: 85%; margin-left: 20px;">
								<table id="requestDatagrid1"
									data-options="fitColumns:true,toolbar:'#toolbox'">
								</table>
							</div>
						</li>

						<li style="background-color: #ccc;"><label class="label"
							style="font-size: 15px;">返回参数和报文：</label></li>

						<li class="li_col" style="width: 100%;">
							<div class="input_con table_add" id="requestParametersTable"
								style="width: 85%; margin-left: 20px;">
								<table id="reponseDatagrid2"
									data-options="fitColumns:true,toolbar:'#toolbox'">
								</table>
							</div>
						</li>

					</ul>
				</div>
			</div>
			<table id="requestDatagrid1" data-options="fitColumns:true">
			</table>
		</div>
		<button onclick="closeCompare()" class="default_btn easyui-linkbutton"
			iconCls="icon-export" style="margin: 0 auto;">关闭</button>
	</div>
	<div class="pop_window"></div>
	<div style="display: none;" class="pop_window_text">
		<span></span>
		<p style="padding-top: 12px;">没有重复的内容，无法比对</p>
	</div>
	<script type="text/javascript" src="/webjars/json3/3.3.2/json3.min.js"></script>
	<script type="text/javascript"
		src="../../../js/jquery-easyui-1.4.3/jquery.min.js"></script>
	<script type="text/javascript"
		src="../../../js/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
	<script type="text/javascript"
		src="../../../js/jquery-easyui-1.4.3/locale/easyui-lang-zh_CN.js"></script>
	<script type="text/javascript" src="../../../js/cook/public.js"></script>
	<script type="text/javascript" src="../../../js/cook/constants.js"></script>
	<script type="text/javascript" src="../../../js/cook/FormValidate.js"></script>
	<script>
		$(document)
				.ready(
						function() {
							$(".result-close").click(function(){
								$(".result-dialog").hide();
							});
							$("#result")
									.delegate(
											"a",
											"click",
											function(ev) {
												var name = $(this).attr(
														"data-name");
												var title = "业务服务管理";
												var url = "/pages/esb/ServiceManagement/businessServiceManagement.html?name="
														+ window
																.encodeURI(name);
												var icon = $(this).attr("icon");
												window.parent.OpenTab(title,
														url, icon, true);
											});
							$("#reponseDatagrid").datagrid({
								url : '',
								method:'get',
								autoRowHeight:true,
								singleSelect:true,
								striped:true,
								nowrap:false,
								columns:[[
											{field:'paramName',title:'参数名称',width:140},
											{field:'paramDataType',title:'参数类型',width:70},
											{field:'isNeed',title:'是否必须',width:100},
											{field:'paramDes',title:'参数描述',width:115}
								      ]]
							});
							
							$("#requestDatagrid").datagrid({
								url : '',
								method:'get',
								autoRowHeight:true,
								singleSelect:true,
								striped:true,
								nowrap:false,
								columns:[[
											{field:'paramName',title:'参数名称',width:140},
											{field:'paramDataType',title:'参数类型',width:70},
											{field:'isNeed',title:'是否必须',width:100},
											{field:'paramDes',title:'参数描述',width:115}
								      ]]
							});
							
						});
		function start() {
			document.getElementById("progressbar").style.display = "";
			document.getElementById("progressbar_tips").style.display = "";
			//document.getElementById("result").style.display = "none";
			$('.result-dialog').hide();
			$.ajax({
						url : '/api/https/searchDuplic' + '?v='
								+ 'Math.random()',
						dataType : 'json',
						type : 'get',
						contentType : "application/json",
						success : function(data) {	
							//$('.pop_window').show();
							document.getElementById("progressbar_tips").style.display = "none";
							//document.getElementById("result").style.display = "block";
							//document.getElementById('title_text').style.display = "block";
					        $('.result-dialog').show();							
							var len = data.length;
							var html = '';
							var html2 = '';
							if (len != 0) {
								for (var i = 0; i < len; i++) {
									var len2 = data[i].length;
									for (var k = 0; k < len2; k++) {
										html2 += '<div style="margin-top:2px;">'
												+ '<a href="javascript:void(0)" data-name="'
												+ data[i][k].interfaceName
												+ '" data-id="'
												+ data[i][k].interfaceId
												+ '" data-title="领域服务监控"'
												+ '" style="text-decoration:underline;font-size: 16px;">'
												+ data[i][k].interfaceName
												+ '</a></div>';
									}
									html += 
										   '<div id="yuansu">'									        
									        +'<p style="height:28px;background:url(../../../images/layout-browser-hd-bg.png) repeat-x; width: 100%; color:#fff; text-align:center; line-height:28px;">'
									        +'排重比对</p>'
											+ html2
											+ '<button  onclick="compare(this)"  class="clade default_btn easyui-linkbutton" iconCls="icon-export" style="margin:10px auto;" >对比</button>'
											+ '</div>';
									html2 = '';
								}
								$("#result").html(html);
								
							}	
							  /* var blank = $('.clade').parent().find('div').length;
								$('.clade').click(function(){
									if($(this).parent().find('div').length<1){
										$(this).css({'position':'relative','top':'46px'});
									  $('.pop_window_text').css('display','block');
									  $('.pop_window').css('display','block');									  									  
									}									
								});	 */
								/* var egg = $('#yuansu').length;
								var self = $('#yuansu').find('div').length;
							
								if(self<1){
									
									$(this).find('button').css({'position':'relative','top':'46px'});
									$('.clade').click(function(){
										$('.pop_window_text').css('display','block');
										  $('.pop_window').css('display','block');	
									})
								} */
						},
						error : function() {
						}
					});

		}		
		
		function closeCompare() {
			$(".compare-con").hide();
			//$('#scheduling').parent().hide();
			document.getElementById('scheduling').style.display = "block";
			$('.result-dialog').show();
			//document.getElementById("result").style.display = "";
			//document.getElementById('title_text').style.display = "block";
		}

		function compare(target) {
			var ids = '[';
			$(target).siblings("div").find("a").each(function() {
				ids += '"' + $(this).attr("data-id") + '",';
			});
			ids = ids.slice(0, ids.length - 1) + ']';
			var param = ids;
			$.ajax({
				url : '/api/https/compareInterface' + '?v=' + 'Math.random()',
				dataType : 'json',
				type : 'post',
				data : param,
				contentType : "application/json",
				success : function(data) {
					$(".compare-group").html("");
					$(".compare-con").show();
					$('.pop_window').hide();
					$('.result-dialog').hide();
					//document.getElementById("result").style.display = "none";
					//document.getElementById('title_text').style.display = "none";
					if (data.length > 0) {
						for (var i = 0; i < data.length; i++) {
							var html = '<div class="compare-item" style="width:46%; margin:10px 2% 0 0;">'
									+'<div class="compare-items" style="width: 100%">'									
									+'<div>'									
									+'<ul class="ulCss">'
									+'<li style="background-color: #effcff;">接口：</li>'
									+'<li><label id="interfaceAddress" class="label"'
									+'style="margin-left: 20px;">'+data[i].fieldName+' > '+data[i].systemName+' > '+data[i].name+'</label></li>'
									+'<li style="background-color: #effcff;">接口地址：</li>'
									+'<li><label id="interfaceAddress" class="label" id=""'
									+'style="margin-left: 20px;">'+data[i].priUrl+'</label></li>'
									+'<li style="background-color: #effcff;">请求参数：</li>'
									+'<li class="li_col" style="width: 100%;">'
									+'<div class="input_con table_add" id="requestParametersTable"'
									+'style="width: 85%; margin-left: 20px;">'
									+'<table id="requestDatagrid'+i+'"'
									+'data-options="fitColumns:true">'
									+'</table>'
									+'</div>'
									+'</li>'
									+'<li style="background-color: #effcff;">请求报文：</li>'
									+'<li class="li_col" style="width: 100%;">'
									+'<div id="req_param" style="width:100%;">'
									+'<div class="input_con"> '
									+'<textarea style="width:96%;height:100px; padding:12px 5px;margin: 0 auto;" name="requestParametersMsg" id="requestParametersMsg'+i+'" class="text" tabindex="11">'
									+'</textarea>'
									+'</div>'
									+'</div>'									
									+'</li>'
									+'</ul>'
									+'</div>'
									+'</div>'
									+'</div>';
								$(".compare-group").append(html);
							$("#reponseDatagrid"+i).datagrid({
								url : '',
								method:'get',
								autoRowHeight:true,
								singleSelect:true,
								striped:true,
								nowrap:false,
								columns:[[
											{field:'paramName',title:'参数名称',width:140},
											{field:'paramDataType',title:'参数类型',width:70},
											{field:'isNeed',title:'是否必须',width:100},
											{field:'paramDes',title:'参数描述',width:115}
								      ]]
							});
							
							$("#requestDatagrid"+i).datagrid({
								url : '',
								method:'get',
								autoRowHeight:true,
								singleSelect:true,
								striped:true,
								nowrap:false,
								columns:[[
											{field:'paramName',title:'参数名称',width:140},
											{field:'paramDataType',title:'参数类型',width:70},
											{field:'isNeed',title:'是否必须',width:100},
											{field:'paramDes',title:'参数描述',width:115}
								      ]]
							});
							 var requestParams = {
									total:"",
									rows:data[i].IfParameterReqJsonDatas
							}
							$("#requestDatagrid"+i).datagrid('loadData', requestParams);
							
							$("#requestParametersMsg"+i).text(data[i].requestMess.replace(/&lt;/g, "<").replace(/&gt;/g, ">"));	
						}
						//$(".compare-group").html(html);	
					}
				}
			});
		}	
		$('.pop_window').click(function(){
			document.getElementById('scheduling').style.display = "block";
			$('.pop_window').hide();
			$('.pop_window_text').hide();
		})
		$('.pop_window_text span').click(function(){
			$('.pop_window_text').hide();
			$('.pop_window').hide()
		})

	</script>
</body>
</html>
